
{% extends 'base.html' %}
{% block title %}Brisbane Coupon{% endblock %}
{% block stylesheet %}
{{ block.super }}
<style type="text/css">
#map_canvas {
    width: 240px;
    height: 280px;
}
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/jquery.fn.gmap.js" ></script>
<script type="text/javascript">

{% load brispon_filter %}

$(function() {
    
//////////////
    var currentLat = 0.0;
    var currentLong = 0.0;
    navigator.geolocation.getCurrentPosition(showPosition, positionError);
    function showPosition(position){
        var coordinates = position.coords;
        currentLat = coordinates.latitude;
        currentLong = coordinates.longitude;
    }
    function positionError(position){
        alert('s');
    }
    
    $("#near").click(function(){
        url = "{% url mstores_map %}" + "?lat=" + currentLat + "&long=" + currentLong;
        $(location).attr('href',url);
    });        
//////////////
    $('#map_canvas').gmap({'zoom':11, 'center': '-27.48147, 153.03612' }).bind('init', function(event, map) { 
                    
        var bounds = map.getBounds();
        var southWest = new google.maps.LatLng(-27.61480, 153.11533);
        var northEast = new google.maps.LatLng(-27.37847, 152.90815);
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        
        var tags = [];
        {% for c in categories %}
        tags.push("{{ c.name }}");
        {% endfor %}
        
        var options = '<option value="all">All</option>';
        $.each(tags, function(i, tag) {
            options += '<option value="'+ tag + '">' + tag + '</option>';
        });
        $('#tags').append(options);
        
        var opts = {'id': 'm_' + '0',
                    'icon': '{{ STATIC_PREFIX }}images/gmi/black.png',
                    //'tags': '{{ s.category.name }}',
                    'bound':true, 
                    'position': new google.maps.LatLng(currentLat, currentLong)
                    };
                    
        $('#map_canvas').gmap('addMarker', opts ).click(function() {
            $('#map_canvas').gmap('openInfoWindow', { 'content': '<p>Here you are</p>' }, this);
        });
        
        {% for s in stores %}
        var opts = {'id': 'm_' + '{{ forloop.counter1 }}',
                    'icon': '{{ s.category.icon.url }}',
                    'tags': '{{ s.category.name }}',
                    'bound':true, 
                    'position': new google.maps.LatLng({{ s.latitude }}, {{ s.longitude }})
                    };
                    
        $('#map_canvas').gmap('addMarker', opts ).click(function() {
            $('#map_canvas').gmap('openInfoWindow', { 'content': '<h3><a href="{{ s.murl }}">{{ s.name }}</a></h3>' }, this);
        });
        {% endfor%}

        $('#map_canvas').gmap('addControl', 'tags-control', google.maps.ControlPosition.TOP_LEFT);
    
        $("#tags").change(function() {
            var bounds = new google.maps.LatLngBounds();
            var tag = $(this).val();
            if ( tag == 'all' ) {
                $('#map_canvas').gmap('findMarker', 'tags', tag, false, function(marker, found) {
                    marker.setVisible(true); 
                    bounds.extend(marker.position);
                    marker.map.fitBounds(bounds);   
                });
            } else {
                $('#map_canvas').gmap('findMarker', 'tags', tag, ',', function(marker, found) {
                    if (found) {
                        marker.setVisible(true); 
                        bounds.extend(marker.position);
                        marker.map.fitBounds(bounds);
                    } else { 
                        marker.setVisible(false); 
                    }
                });
            }
            
        });
    
    });
});
</script>
{% endblock%}

{% block content %}

<div id="map_canvas"></div>
<a id="near" href="#">Near Stores</a> <span>(현재 위치에서 근방 10km 이내에 있는 store를 찾아 줍니다.)</span>

<div id="tags-control" class="item gradient ui-corner-all shadow-all" style="margin:5px;padding:5px 5px 5px 10px;">
<label style="color:#555;font-size:12px; font-weight:bold;" for="tags">Filter by tag</label>
<select id="tags" style="outline:none;"></select>
</div>
      
{% endblock %}
